<template>
  <div class="commonTableSty">
    <a-table
      :columns="columns"
      :data-source="lists"
      :pagination="false"
      :scroll="{ x: 600 }"
      :loading="downing"
      row-key="fileId">
      <template slot="operation" slot-scope="text,record">
        <a @click="downloadFile(record)">{{ $t('download') }}</a>
      </template>
    </a-table>
  </div>
</template>
<script>
import { downloadBlobFile } from '@/utils/functions'
import fileApi from '@/api/modules/system/fileUpload'
export default {
  props: {
    lists: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      downing: false,
      columns: [{
        title: this.$t('attachment'),
        dataIndex: 'fileName',
        key: 'attachment',
        width: '300px',
        scopedSlots: { customRender: 'attachment' }
      }, {
        title: this.$t('operation'),
        dataIndex: 'operation',
        key: 'operation',
        width: '60px',
        scopedSlots: { customRender: 'operation' }
      }]
    }
  },
  methods: {
    downloadFile (file) {
      if (file.fileUrl) {
        const downloadElement = document.createElement('a')
        const reg = /^["](.*)["]$/g
        downloadElement.style.display = 'none'
        downloadElement.href = file.fileUrl
        downloadElement.download = decodeURI(file.fileName.replace(reg, '$1')) // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
      } else {
        this.downing = true
        fileApi.downloadFileToLocal({ id: file.fileId }).then((res) => {
          downloadBlobFile(res, file.fileName)
        }).finally(() => {
          this.downing = false
        })
      }
    }
  }
}
</script>
